import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
	data: {
		type: Object,
		default: () => ({
			list: []
		}),
		require: true
	}
} as const
let color = ['#93F5E1', '#93AAF5', '#93DBF5', '#FF8400', '#00FFFF', '#fd5151', '#f071ff', '#85f67a'];

// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		const chartRef = ref()
		// 配置项
		let options = {}
		watch(
			() => props.data,
			(val: any) => {
				options = {
					tooltip: {
						show: true,
						trigger: "axis",
						// backgroundColor: "rgba(17,95,182,1)", //设置背景颜色
						// textStyle: {
						// 	color: "#fff",
						// },
						formatter: "{b}：{c}亩",
					},
					grid: {
						right: "6%",
						top: "10%",
						left: "2%",
						bottom: "0%",
						containLabel: true,
					},
					xAxis: {
						type: "category",
						boundaryGap: true,
						data: val.list.map(item=>item.name),
						axisLabel: {
							interval: 0,
							textStyle: {
								color: "rgba(255, 255, 255, 0.80)",
								fontSize: 16
							},
						},
						axisTick: {
							//坐标轴刻度相关设置。
							show: false,
						},
						axisLine: {
							//坐标轴轴线相关设置
							lineStyle: {
								color: "#fff",
							},
						},
						splitLine: {
							//坐标轴在 grid 区域中的分隔线。
							show: false,
						},
					},
					yAxis: [
						{
							type: "value",
							splitNumber: 5,
							axisLabel: {
								show: true,
								textStyle: {
									color: "rgba(255, 255, 255, 0.80)",
									fontSize: 16
								},
							},
							axisLine: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(255, 255, 255, 0.60)",
									type: "dashed",
								},
							},
						},
					],
					series: [
						{
							name: "从业人员",
							type: "pictorialBar",
							stack: "数量",
							label: {
								normal: {
									show: true,
									position: "top",
									textStyle: {
										color: "#FFFFFF",
										fontSize: 16,
									},
								},
							},
							itemStyle: {
								normal: {
									color: {
										type: "linear",
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
											{
												offset: 0,
												color: "rgba(255, 235, 153, 1)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(255, 255, 255, 0)", // 100% 处的颜色
											},
										],
										globalCoord: false, // 缺省为 false
									}
								},
							},
							symbol: "path://M48 0 L49 17 C52 72 68 125 96 173 H0 C25 125 41 73 46 19 L48 0Z",
							data: val.list.map(item=>item.count),
						},
					],
				}
				// 手动触发更新
				if (chartRef.value) {
					// 通过初始化参数打入数据
					chartRef.value.initChart(options, true)
				}
			},
			{
				immediate: true,
				deep: true
			}
		)
		return () => {
			const height = "228px"
			const width = "480px"

			return <div>
				<echart ref={chartRef} options={options} height={height} width={width} />
			</div>
		}
	}
})

